﻿

body{
    margin: 0;
    padding: 0;
    color: #333;
    font-size:62.5%;
    background: #ededed;
    font-family: Microsoft YaHei;
}

/* screening */
div.screening{
    width: 100%;
    overflow: hidden;
    background: #fff;
    position: fixed;
    top:4rem;
    z-index: 4;
}
div.screening>ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    border-bottom: solid 1px #d3d3d3;
    overflow: hidden;
}
div.screening>ul>li{
    float: left;
    width: 32%;
    text-align: center;
    line-height: 3rem;
    border-left:0;
    background: url("../images/on_1.png") no-repeat 88% center;
    background-size:1rem 0.5rem;
}
div.screening>ul>span{float: left;line-height: 3rem;display: inline-block; width: 1%; text-align: center; color: #C7C6CB}
/* grade */
.grade-eject,.Category-eject,.Sort-eject{
    position:fixed;
    top: -65%;
    width: 100%;
    height: 65%;
    z-index: 1;
    -webkit-transition-duration: 0.4s;
}

.grade-eject>ul,.Category-eject>ul,.Sort-eject>ul{
    margin: 0;
    padding: 0;
    overflow: auto;
    height: 100%;
    width: 100%;
    -webkit-transition-duration: 0.4s;
}
.grade-eject>ul>li,.Category-eject>ul>li,.Sort-eject>ul>li{
    line-height: 3rem;
    /*font-size: 0.12rem;*/
    padding-left: 1rem;
    background-color: #f2f2f2;
    border-bottom: solid 1px #ccc;
}
.grade-eject>ul.grade-w,.Category-eject>ul.Category-w{
    background: #fff;
    position: absolute;
    z-index: 1;
}
.grade-eject>ul.grade-t,.Category-eject>ul.Category-t{
    background-color: #fff;
    position: absolute;
    z-index: 2;
    left: 100%;
    border-left: 0.1rem solid #eee;
}
.grade-t li{border:0!important; width: 100%;}
.grade-t li a{
    border:0.1rem solid #ccc; 
    display: inline-block; 
    width:19.2%; 
    margin:0.5rem 2% 0 0;
    height:2.2rem; 
    font-size: 1rem;
    line-height: 2.2rem;
    border-radius: 0.4rem;
    text-align: center;
    background: #fff;
    color: #666;

}
.grade-eject>ul.grade-s,.Category-eject>ul.Category-s{
    background: #fff;
    position: absolute;
    z-index: 3;
    left: 100%;
    list-style-type: none;
}
.grade-eject>ul.grade-s>li,.Category-eject>ul.Category-s>li{
    border-bottom: solid 1px #ccc;
    margin-left: 1rem;
    padding: 0;
}
.grade-w-roll{
top: 7rem;
}
.grade-w-roll::after{
    position: fixed;
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background:#000;
    opacity: 0.6;
    top: 0;
}
/*Sort-eject*/
.Sort-Sort{
    background: #fff;
    position: absolute;
    z-index: 3;
    left: 0;
    list-style-type: none;
}
.Sort-Sort>li{
    border-bottom: solid 1px #eee;
    padding: 0;
}
.Sort-height{
    height: 343px;
}

/* demo-content */
.demo-content{padding-top: 3rem;}
.Category-eject ul{overflow: auto;padding-top: 1rem;}
.Category-eject ul li{border:0;background: #fff;}
.Category-eject ul li input{margin:0.5rem; font-size: 1.2rem!important; background-image: url(../images/a8.png)!important; background-size:1.6rem; background-repeat: no-repeat; background-position: 95% center;}
.Category-eject ul li span{margin-top: 0.2rem;}
.Category-eject ul li .shuzi{float:left; margin-left: 0.5rem; border-radius: 0.3rem; width:8rem; margin-top: 0.6rem; height:2.6rem;border:0.1rem solid #ccc; }
.Category-eject ul li .shuzi input{width:3rem;text-align: center;border:0px; font-size: 1.6rem; margin:0; background-image: none!important; color: #666; background: #fff; border-left: 0.1rem solid #ccc; border-right: 0.1rem solid #ccc;height: 2.4rem; float: left;}
.Category-eject ul li .shuzi button{width:2.4rem; height:2.4rem;border:0px; color:#666; font-size: 1.6rem; float: left; background: #eee;}
.Category-eject ul li .shuzi .minus{border-top-left-radius: 0.3rem;border-bottom-left-radius: 0.5rem;}
.Category-eject ul li .shuzi .plus{border-top-right-radius: 0.3rem;border-bottom-right-radius: 0.5rem;}
.Category-eject ul li .btn-qd{width:calc(100% - 1rem); font-size: 1.6rem; margin-top: 2rem; height: 3rem; line-height: 3rem; background: #ee7999; color: #fff;border: 0; border-radius: 0.4rem;}
.Sort-Sort li img{width: 1.4rem;margin-top: -0.5rem; height: 1.4rem; margin-right: 0.5rem;}
.Sort-Sort li .img{width:0.6rem; height: 1.4rem; margin: 0 0.5rem}
.Sort-Sort li .img1{filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);}
.Sort-Sort li{background-image: url(../images/x13.png); background-size: 1.4rem; background-repeat: no-repeat; background-position: 95% center;}
.Sort-Sort .chack{background-image: url(../images/x12.png)!important;background-size: 1.4rem!important; background-repeat: no-repeat!important; background-position: 95% center!important;}
#gradet li{background-color:#fff;}
#gradet li .cc{background:#69bae0; color: #fff;}

.screening ul .color{color: #69bae0;}

